<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NFlex,
  NSelect,
  NTreeSelect,
  useMessage,
  NButton,
  NUpload,
  NImage,
  NSwitch,
  NAvatar
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import { getToken } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import { useRoute } from 'vue-router'
import { TRUE } from 'sass'
import { router } from '@/router'
import Group from './goods_group.vue'
import * as ydui from '@/assets/js/ydui.citys'
import { useTagsStore } from '@/store'
const route = useRoute()
const tagsStore = useTagsStore()
let yduiCtiys = YDUI_CITYS
let addressArr = reactive({ options: [] })
let addrs = []
yduiCtiys.forEach((province, pid) => {
  let p = {}
  p.label = province.n
  p.id = province.n
  // p.children = province.c;
  addrs.push(p)

  addrs[pid].children = []
  province.c.forEach((city, cid) => {
    let c = {}
    c.label = city.n
    c.id = `${province.n} ${city.n}`
    addrs[pid].children.push(c)

    c.children = []

    city.a.forEach((area, aid) => {
      let a = {}
      a.label = area
      a.id = `${province.n} ${city.n} ${area}`
      c.children.push(a)
    })
  })
})
addressArr.options = addrs

defineOptions({ name: '商品模版编辑' })

const $table = ref(null)
const queryItems = ref({})
const vPermission = resolveDirective('permission')
const base_path = import.meta.env.VITE_BASE

const {
  modalVisible,
  modalTitle,
  modalLoading,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
  handleSave,
} = useCRUD({
  name: '运费模版',
  initForm: {},
  doCreate: api.creategoodsGood,
  doUpdate: api.updategoodsGood,
  doDelete: api.deletegoodsGood,
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  sevendayOption: [
    {
      id: 0,
      name: '是',
    },
    {
      id: 1,
      name: '否',
    },
  ],

  search_goods: '',
  goods: [],
  goods_id: '',
  giver_goods_id: '',
  goodsType: [],
  uploadAction: base_path + 'api/goods/goods/file',
  token: getToken(),
  row: [],
  brandData: [],
  brandOption: [],
  growData: [],
  expressData: [],
  levelData: [],
  onLevelData: [],
  infor_ggData: [],
  infor_msData: [],
  fileList: [],
  contact_goods_options: [],
  coupons_type: [],
  selected_sku: {
    sku_name: '',
    sku_cover: [],
    sku_kc: '',
    sku_level: [],
    can_do: '1',
    include:[]
  },
  rebate_type:[
    {
      id:1,
      name:'购买发放'
    },
    {
      id:2,
      name:'开卡发放'
    },
  ],
  group:{
    sku_id:0,
    goods_id:0,
    include:[],
    showGoodsModal: false,
  },


})

const onCreate = () => {
  return {
    attr_name: '',
    attr_value: [],
  }
}
const onCreate_after = () => {
  return {
    attr_name: '',
    attr_value: [],
  }
}
const onCreate_gg = () => {
  return {
    sku_name: '',
    sku_cover: [],
    sku_kc: '',
    sku_level: [],
    can_do: '1',
    include:[]
  }
}
function on_save() {
  if (!modalForm.value.cover) {
    message.error("请上传商品封面" + modalForm.value.cover)
    return
  }
  if (!modalForm.value.banners) {
    message.error("请上传轮播图至少一张")
    return
  }
  if (!modalForm.value.contents) {
    message.error("请上传商品详情至少一张")
    return
  }
  if (!modalForm.value.sku) {
    message.error("请上传商品一个规格")
    return
  }
  if(data.group.include){
    modalForm.value.sku[0].include = data.group.include
  }

  handleSave()
}


async function get_data(id) {
  let ret = await api.detailgoodsGood({ data_id: id })
  data.row = ret.data
  //   data.row.cover

  handleEdit(data.row)
  if (!data.row.tags) {
    modalForm.value.tags = []
  }

  data.fileList.value = [{
    id: 1,
    name: '封面',
    url: data.row.cover,
    status: "finished"
  }]
}
function on_list() {
  tagsStore.removeTag(route.fullPath)
  router.push('/marketing/goods/good')
}

onMounted(() => {
  const id = route.query.id
  modalVisible.value = true
  if (id > 0) {
    get_data(id)
  } else {
    handleAdd()
  }
  $table.value?.handleSearch()
  api.getgoodsBrand().then((res) => (data.brandData.value = res.data))
  api.getgoodsCategoryTree().then((res) => (data.brandOption.value = res.data))
  api.getGrow().then((res) => (data.growData.value = res.data))
  api.getgoodsExpress().then((res) => (data.expressData.value = res.data))
  api.getLever().then((res) => (data.levelData.value = res.data))
  api.getallgoods().then((res) => (data.contact_goods_options = res.data))
  api.getCouponsRuleList().then((res) => (data.coupons_type = res.data))
  api.getgoodsType().then((res) => (data.goodsType = res.data))
  api.getallgoods().then((res) => (data.goods = res.data))
})

watch(modalVisible, (newValue, oldValue) => {
  if (!modalVisible.value) {
    tagsStore.removeTag(route.fullPath)
    router.push('/marketing/goods/good')
  }
})
//获取上级部门id
async function onleves(query) {
  let val = await api.getLeves({ key: query })
  data.onLevelData = val.data
}
//异步下拉获取上级
const loadingRef = ref(false)
const optionsRef = ref([])
const handleLeves = (query) => {
  if (!query.length) {
    optionsRef.value = []
    return
  }
  onleves(query)
  loadingRef.value = true
  // data.selectValue
  window.setTimeout(() => {
    data.onLevelData.value = data.onLevelData.filter((item) => ~item.label.indexOf(query))
    loadingRef.value = false
  }, 1e3)
}
//图文信息
const message = useMessage()
const customRequestMethod1 = (options) => {
  console.log(options, 'options')

  const { file } = options.file
  const formData = new FormData()
  formData.append('file', file)
  fetch(data.uploadAction, {
    method: 'POST',
    headers: options.headers,
    body: formData,
  })
      .then((response) => response.json())
      .then((data) => {
        console.log(data, 'datatat')
        if (data.code === 200) {
          modalForm.value.cover = data.data.url
          message.success('封面图上传成功')
          options.onProgress(data)
        } else {
          message.error(data.msg)
        }
      })
}
const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}

//选择属性
const handleUpdateValue = (value) => {
  if (!value) {
    return
  }
  modalForm.value.info_goods = []
  modalForm.value.info_after = []
  api.getgoodsGood_attr({ data_id: value }).then((res) => {
    data.infor_ggData = res.data.gg_data
    data.infor_msData = res.data.ms_data
    data.infor_msData.forEach((item) => {
      let tags = item.tags
      tags.forEach((items) => {
        modalForm.value.info_goods.push({
          attr_name: items,
          attr_value: [],
        })
      })
    })
    data.infor_ggData.forEach((item) => {
      let tags = item.tags
      tags.forEach((items) => {
        modalForm.value.info_after.push({
          attr_name: items,
          attr_value: [],
        })
      })
    })
  })
}
//格式化关联商品选中
const renderLabel = function ({ option }) {
  return h(
      "div",
      {
        style: {
          display: "flex",
          margin: "6px 0"
        }
      },
      {
        default: () => [
          h(NAvatar, {
            round: true,
            src: option.cover,
            size: "small",
            fallbackSrc: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          }),
          h(
              "div",
              {
                style: {
                  display: "flex",
                  marginLeft: "6px",
                  alignSelf: "center"
                }
              },
              { default: () => option.label }
          )
        ]
      }
  );
};

const validate = {
  brand_id: [
    {
      required: true,
      message: '请输入品牌',
      trigger: ['input', 'blur'],
      type: 'number',
    },
  ],
  type: [
    {
      required: true,
      message: '请输入商品类型',
      trigger: ['input', 'blur'],
      type: 'number',
    },
  ],
  category_id: [
    {
      required: true,
      message: '请输入类目',
      trigger: ['blur', 'change'],
      type: 'number',
    },
  ],
  name: [
    {
      required: true,
      message: '请输入商品标题',
      trigger: ['blur', 'change'],
    },
  ],
}

function show_select_pro(value,goods_id){
  data.group.showGoodsModal = true
  data.group.sku_id = value.id?value.id:0
  data.group.goods_id =goods_id?goods_id:0
  data.group.include =value.include
  data.group.can_do =value.include.zx_can_do
}

// watch(data.group, (newValue, oldValue) => {
//   message.success("保存成功")
// })

function handleGoodsChange() {
  // 根据选择的商品ID更新商品规格选项
  api.getallgoodssku({ goods_id: modalForm.value.goods_id }).then((res) => {
    data.skuOptions = res.data
  })
  modalForm.value.sku_id = null  // 清空已选择的规格
}

function handleGiverGoodsChange() {
  // 根据选择的商品ID更新商品规格选项
  api.getallgoodssku({ goods_id: modalForm.value.giver_goods_id }).then((res) => {
    data.giverSkuOptions = res.data
  })
  modalForm.value.giver_sku_id = null  // 清空已选择的规格
}

</script>

<template>
  <!-- 业务页面 -->
  <CommonPage show-footer title="编辑商品信息">
    <NForm ref="modalFormRef" label-placement="left" label-align="left" :label-width="150" :model="modalForm"
           size="large" :rules="validate">
      <n-card content-style="padding: 0;">
        <n-tabs type="line" animated size="large" :tabs-padding="20" pane-style="padding: 20px;">
          <n-tab-pane name="基础信息">
            <NFormItem label="商品类型" path="type">
              <NSelect style="width: 200px" v-model:value="modalForm.type" label-field="name" value-field="id"
                       :options="data.goodsType" placeholder="商品类型" />
            </NFormItem>
            <NFormItem label="是否划扣类" path="is_buckling" v-show="modalForm.type===1">
              <n-radio-group v-model:value="modalForm.is_buckling" name="radiogroup" :default-value="0">
                <n-space>
                  <n-radio key=0 :value=0>
                    否
                  </n-radio>
                  <n-radio key=1 :value=1>
                    是
                  </n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>
            <NFormItem label="品牌" path="brand_id">
              <NSelect style="width: 200px" v-model:value="modalForm.brand_id" label-field="name" value-field="id"
                       :options="data.brandData.value" placeholder="请选择品牌" />
            </NFormItem>

            <NFormItem label="类目" path="category_id">
              <NTreeSelect style="width: 200px" v-model:value="modalForm.category_id" :options="data.brandOption.value"
                           key-field="id" label-field="name" placeholder="请选择父级商品分类" clearable default-expand-all
                           @update:value="handleUpdateValue"></NTreeSelect>
            </NFormItem>
            <NFormItem label="商品标题" path="name" style="width: 100%">
              <NInput v-model:value="modalForm.name" clearable placeholder="请输入商品标题" />
            </NFormItem>
            <NFormItem label="副标题" path="name_small`" style="width: 100%">
              <NInput v-model:value="modalForm.name_small" clearable placeholder="请输入副标题" />
            </NFormItem>
            <NFormItem label="商品排序" path="ordere" styl="width: 100%">
              <NInputNumber v-model:value="modalForm.order" clearable placeholder="请输入商品排序" :default-value="0" />
            </NFormItem>
            <NFormItem label="商品标签" path="tags" style="width: 100%">
              <n-dynamic-tags type="primary" v-model:value="modalForm.tags" />
            </NFormItem>

          </n-tab-pane>
          <n-tab-pane name="图文介绍">
            <NFormItem label="封面图" path="cover" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ token: data.token }" :max="1"
                       :custom-request="customRequestMethod1" list-type="image-card" v-model:file-list="data.fileList.value"
                       :show-file-list="true">
              </NUpload>
            </NFormItem>
            <NFormItem label="轮播图" path="banners" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ token: data.token }" multiple list-type="image-card"
                       @finish="handleFinish" v-model:file-list="modalForm.banners">
              </NUpload>
            </NFormItem>
            <NFormItem label="详情图" path="contents" style="width: 100%">
              <NUpload :action="data.uploadAction" :headers="{ token: data.token }" multiple list-type="image-card"
                       @finish="handleFinish" v-model:file-list="modalForm.contents">
              </NUpload>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane v-if="modalForm.type===1||modalForm.type===4" name="项目规格">
<!--            <n-alert>{{data.group}}</n-alert>-->
<!--            <n-alert>{{modalForm.value}}</n-alert>-->
            <NFormItem label="包含项目内容" path="sku">
              <n-layout>
                <n-layout-header>
                  <n-flex >
                    <n-tag size="large" style="width: 180px"> 规格 </n-tag>
                    <n-tag size="large" style="width: 40px"> 封面 </n-tag>
                    <n-tag size="large" style="width: 100px" v-for="item in data.levelData.value"> {{ item.name }}价格
                    </n-tag>
                    <n-tag size="large" style="width: 100px"> 库存 </n-tag>
                    <n-tag size="large" style="width: 120px" v-if="modalForm.is_buckling === 1&&modalForm.type===1"> 疗程次数 </n-tag>
                    <n-tag size="large" style="width: 120px" v-if="modalForm.type===4"> 包含商品组合 </n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.sku" :on-create="onCreate_gg" max="1" min="1">
                    <template #default="{ value }">
                      <n-flex justify="space-between" >
                        <n-input button-placement="both" v-model:value="value.sku_name" style="width: 180px" />
                        <n-upload :max="1" style="width: 40px;" class="cover" :action="data.uploadAction"
                                  :headers="{ token: data.token }" list-type="image-card" @finish="handleFinish"
                                  v-model:file-list="value.sku_cover" :show-preview-button="false"></n-upload>
                        <n-input-number v-for="(item, index) in data.levelData.value" :key="index" :show-button="false"
                                        v-model:value="value.sku_level[item.id]" style="width: 100px">
                          <template #prefix> ￥ </template>
                        </n-input-number>
                        <n-input-number :show-button="false" v-model:value="value.sku_kc" style="width: 100px" />
                        <n-input-number :show-button="false" v-model:value="value.can_do" style="width: 120px"
                                        v-if="modalForm.is_buckling === 1&&modalForm.type===1" />
                        <n-button type="primary" style="width: 120px" @click="show_select_pro(value,modalForm.id)" v-if="modalForm.type===4">
                          商品组合
                        </n-button>
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane v-else name="商品规格">
            <NFormItem label="SKU列表" path="sku">
              <n-layout>
                <n-layout-header>
                  <n-flex >
                    <n-tag size="large" style="width: 200px"> 规格 </n-tag>
                    <n-tag size="large" style="width: 40px"> 封面 </n-tag>
                    <n-tag size="large" style="width: 120px" v-for="item in data.levelData.value"> {{ item.name }}价格
                    </n-tag>
                    <n-tag size="large" style="width: 100px"> 库存 </n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.sku" :on-create="onCreate_gg">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input button-placement="both" v-model:value="value.sku_name" style="width: 200px" />
                        <n-upload :max="1" style="width: 40px;" class="cover" :action="data.uploadAction"
                                  :headers="{ token: data.token }" list-type="image-card" @finish="handleFinish"
                                  v-model:file-list="value.sku_cover" :show-preview-button="false"></n-upload>
                        <n-input-number v-for="(item, index) in data.levelData.value" :key="index" :show-button="false"
                                        v-model:value="value.sku_level[item.id]" style="width: 120px">
                          <template #prefix> ￥ </template>
                        </n-input-number>

                        <n-input-number :show-button="false" v-model:value="value.sku_kc" style="width: 100px" />
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="商品属性">
            <NFormItem label="商品属性" path="info_goods">
              <n-layout>
                <n-layout-header>
                  <n-flex>
                    <n-tag size="large" style="width: 100px"> 属性名 </n-tag>
                    <n-tag size="large" style="width: 200px"> 属性值 </n-tag>
                    <n-tag size="large" style="width: 200px"> 加价/与属性对应,只输入数字</n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.info_goods" :on-create="onCreate">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input button-placement="both" v-model:value="value.attr_name" style="width: 100px" />
                        <!--                        <n-input-->
                        <!--                          button-placement="both"-->
                        <!--                          v-model:value="value.attr_value"-->
                        <!--                          style="width: 200px"-->
                        <!--                        />-->
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 200px"
                                        v-model:value="value.attr_value" />
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 200px"
                                        v-model:value="value.attr_price" />
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
            <NFormItem label="发货/其他属性" path="info_after">
              <n-layout>
                <n-layout-header>
                  <n-flex>
                    <n-tag size="large" style="width: 100px"> 属性名 </n-tag>
                    <n-tag size="large" style="width: 400px"> 属性值 </n-tag>
                  </n-flex>
                </n-layout-header>
                <n-layout-content content-style="padding: 10px 0;">
                  <n-dynamic-input v-model:value="modalForm.info_after" :on-create="onCreate_after">
                    <template #default="{ value }">
                      <n-flex justify="space-between">
                        <n-input button-placement="both" v-model:value="value.attr_name" style="width: 100px" />
                        <n-dynamic-tags size="large" button-placement="both" type="primary" style="width: 400px"
                                        v-model:value="value.attr_value" />
                      </n-flex>
                    </template>
                  </n-dynamic-input>
                </n-layout-content>
              </n-layout>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="购买人营销权益">
            <NFormItem label="获得时机" path="rebate">
              <NSelect style="width: 200px" v-model:value="modalForm.rebate" label-field="name" value-field="id"
                       :options="data.rebate_type" placeholder="请选择获得时机" clearable />
            </NFormItem>
            <NFormItem label="佣金模板" path="grow_id">
              <NSelect style="width: 200px" v-model:value="modalForm.grow_id" label-field="name" value-field="id"
                       :options="data.growData.value" placeholder="请选择佣金培育模板" clearable />
            </NFormItem>
            <NFormItem label="获得储值金" path="get_deposit">
              <n-input-number style="width: 150px" v-model:value="modalForm.get_deposit" clearable />
              &nbsp;&nbsp;~&nbsp;&nbsp;
              <n-input-number style="width: 150px" v-model:value="modalForm.get_deposit_max" clearable />
              &nbsp;&nbsp;如果是固定,填写相同即可
            </NFormItem>
            <NFormItem label="获得积分" path="get_integral">
              <n-input-number style="width: 150px" v-model:value="modalForm.get_integral" clearable />
            </NFormItem>
            <NFormItem label="获得成长积分" path="get_level_integral">
              <n-input-number style="width: 150px" v-model:value="modalForm.get_level_integral" clearable />
            </NFormItem>
            <NFormItem label="获得优惠券" path="get_coupons">
              <NSelect style="width: 500px" v-model:value="modalForm.get_coupons" :options="data.coupons_type"
                       placeholder="请选择优惠券" clearable />
            </NFormItem>
            <NFormItem label="赠送商品" path="goods_id">
              <NSelect
                  style="width: 245px"
                  v-model:value="modalForm.goods_id"
                  :options="data.goods"
                  placeholder="请选择商品"
                  filterable
                  clearable
                  @update:value="handleGoodsChange"
              />&nbsp;
              <NSelect
                  style="width: 245px;margin-left:10px"
                  v-model:value="modalForm.sku_id"
                  :options="data.skuOptions"
                  placeholder="请选择商品规格"
                  filterable
                  clearable
              />
            </NFormItem>


          </n-tab-pane>
          <n-tab-pane name="赠送人营销权益">
            <NFormItem label="获得积分" path="giver_integral">
              <n-input-number style="width: 150px" v-model:value="modalForm.giver_integral" clearable />
            </NFormItem>
            <NFormItem label="获得成长积分" path="giver_level_integral">
              <n-input-number style="width: 150px" v-model:value="modalForm.giver_level_integral" clearable />
            </NFormItem>
            <NFormItem label="获得优惠券" path="giver_coupons">
              <NSelect style="width: 500px" v-model:value="modalForm.giver_coupons" :options="data.coupons_type"
                       placeholder="请选择优惠券" clearable />
            </NFormItem>
            <NFormItem label="赠送商品" path="giver_goods_id">
              <NSelect
                  style="width: 245px"
                  v-model:value="modalForm.giver_goods_id"
                  :options="data.goods"
                  placeholder="请选择商品"
                  filterable
                  clearable
                  @update:value="handleGiverGoodsChange"
              />
              <NSelect
                  style="width: 245px;margin-left:10px"
                  v-model:value="modalForm.giver_sku_id"
                  :options="data.giverSkuOptions"
                  placeholder="请选择商品规格"
                  filterable
                  clearable
              />
            </NFormItem>

          </n-tab-pane>
          <n-tab-pane name="提成设置">
            <NFormItem label="录入人提成(%)" path="input_cps">
              <n-input-number style="width: 200px" v-model:value="modalForm.input_cps" clearable :precision="2"/>
            </NFormItem>
            <NFormItem label="技师提成(%)" path="operate_cps">
              <n-input-number style="width: 200px" v-model:value="modalForm.operate_cps" clearable :precision="2"/>
            </NFormItem>

          </n-tab-pane>
          <n-tab-pane name="物流及其他销售设置">
            <NFormItem label="运费模板" path="express_id">
              <NSelect style="width: 200px" v-model:value="modalForm.express_id" label-field="name" value-field="id"
                       :options="data.expressData.value" placeholder="请选择运费模板" />
            </NFormItem>

            <NFormItem label="是否预热商品" path="is_hot">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_hot" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker v-if="modalForm.is_hot === 1" style="width: 200px" type="datetime"
                               v-model:formatted-value="modalForm.is_hot_date" value-format="yyyy-MM-dd HH:mm:ss"
                               placeholder="开售时间" />
              </n-space>
            </NFormItem>

            <NFormItem label="是否定时上架" path="is_on">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_on" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker v-if="modalForm.is_on === 1" style="width: 200px" type="datetime"
                               v-model:formatted-value="modalForm.is_on_date" value-format="yyyy-MM-dd HH:mm:ss"
                               placeholder="定时上架时间" />
              </n-space>
            </NFormItem>

            <NFormItem label="是否定时下架" path="is_off">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_off" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-date-picker v-if="modalForm.is_off === 1" style="width: 200px" type="datetime"
                               v-model:formatted-value="modalForm.is_off_date" value-format="yyyy-MM-dd HH:mm:ss"
                               placeholder="定时下架时间" />
              </n-space>
            </NFormItem>

            <NFormItem label="限购设置" path="is_buy">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_buy" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-space align="center" v-if="modalForm.is_buy === 1">
                  <n-input-number style="width: 150px" v-model:value="modalForm.is_buy_days"
                                  clearable />天内，同一用户限购<n-input-number style="width: 150px" v-model:value="modalForm.is_buy_nums"
                                                                               clearable />件
                </n-space>
              </n-space>
            </NFormItem>

            <NFormItem label="最低起购设置" path="is_low">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_low" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <n-input-number v-if="modalForm.is_low === 1" style="width: 150px" v-model:value="modalForm.is_low_nums"
                                clearable />
              </n-space>
            </NFormItem>

            <NFormItem label="限制购买等级" path="is_buy_level">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_buy_level" :checked-value="1" :unchecked-value="0"
                         :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect v-if="modalForm.is_buy_level === 1" style="width: 500px"
                         v-model:value="modalForm.is_buy_level_roles" label-field="name" value-field="id" multiple
                         :options="data.levelData.value" placeholder="请选择限制购买等级" />
              </n-space>
            </NFormItem>

            <NFormItem label="限制可见等级" path="is_read">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_read" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect v-if="modalForm.is_read === 1" style="width: 500px" v-model:value="modalForm.is_read_roles"
                         label-field="name" value-field="id" multiple :options="data.levelData.value"
                         placeholder="请选择限制可见等级" />
              </n-space>
            </NFormItem>

            <NFormItem label="指定用户可见可购买" path="is_select_user">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_select_user" :checked-value="1" :unchecked-value="0"
                         :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
                <NSelect multiple v-if="modalForm.is_select_user === 1" style="width: 500px"
                         v-model:value="modalForm.is_select_user_users" filterable placeholder="请选择指定用户可见可购买"
                         :options="data.onLevelData" :loading="loading" clearable remote @search="handleLeves" />
              </n-space>
            </NFormItem>

            <NFormItem label="商品禁止分享" path="is_share">
              <n-space align="center">
                <NSwitch v-model:value="modalForm.is_share" :checked-value="1" :unchecked-value="0" :default-value="0">
                  <template #checked>开启</template><template #unchecked>关闭</template>
                </NSwitch>
              </n-space>
            </NFormItem>
            <NFormItem label="支持7天无理由" path="is_seven_day">
              <n-radio-group v-model:value="modalForm.is_seven_day" name="radiogroup" :default-value="1">
                <n-space>
                  <n-radio v-for="item in data.sevendayOption" :key="item.id" :value="item.id">
                    {{ item.name }}
                  </n-radio>
                </n-space>
              </n-radio-group>
            </NFormItem>
          </n-tab-pane>
          <n-tab-pane name="关联商品">
            <NFormItem label="关联商品" path="contact_goods">
              <n-transfer v-model:value="modalForm.contact_goods" :options="data.contact_goods_options"
                          :render-target-label="renderLabel" style="width: 1200px" source-filterable />
            </NFormItem>
          </n-tab-pane>
        </n-tabs>
      </n-card>
      <n-button :loading="loading" mt-20 type="primary" @click="on_list">返回列表</n-button>
      <n-button :loading="loading" mt-20 ml-15 type="primary" @click="on_save">保存</n-button>
    </NForm>

    <!-- 组合选择弹窗 -->
    <n-drawer v-model:show="data.group.showGoodsModal" width="70%" placement="right">
      <n-drawer-content>
        <Group v-model="data.group"/>
      </n-drawer-content>
    </n-drawer>
    <!-- 组合选择弹窗 -->

  </CommonPage>
</template>
